<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Slider from "@/components/Slider.vue"

let items = ref()
let userList = ref()
onMounted(() => {
    const scroll = document.getElementById('video-scroll')

    scroll?.addEventListener('wheel',function(e){
        console.log(document.body.scrollTop)
        e.preventDefault()
    })

    const arr = Array.from({length:7},(_,i)=>{
        return  {video_src: "./src/assets/videos/"+(i+1)+".mp4" ,bg_img:"",bg_color:"#000",title:"视频1",user:{name:'作者1',avatar:''}}
    })
    arr.sort(()=>{
        return 0.5 - Math.random()
    })
    items.value = arr
    userList.value = Array.from({length:30},(_,i)=>{
        return {
            title: i,
            img: `https://picsum.photos/30/30/?`+Math.random()
        }
    })
});


</script>

<template>
    <div style=" height: 100%; display: flex;flex-direction: row; padding: 0 0 12px 8px;overflow-y: auto;">
        <div id="user-drawer" style="width: 202px; margin-bottom: 1.5rem; padding-left:12px ; ">
            <div class="u-header" style="position: relative; color: #8a888e; height: 1.5rem; width:100%;font-size: 0.875rem; line-height: 1.5rem;">
                <div style="font-weight: 600;"> 正在直播(8) </div>
                <div style="width:1.5rem; height: 1.5rem; position: absolute; right:0.75rem; top:0rem; ">
                    <SvgIcon :iconSize="1.5" name="drawer-open" />
                </div>
            </div>

            <div style="margin-bottom: 1rem auto;overflow-y: scroll; height: 100%;">
                <div class="l-item" v-for="(item , index) in userList"> 
                    <div style="display: flex;align-items: center;">
                        <img style="width: 32px;height: 32px;border-radius: 50%;" :src="item.img" alt="">
                    </div>
                    <div style="flex: 1;padding:0 0.5rem; ">
                        <div style="font-size: 0.875rem;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 13px;line-height: 1rem;display: -webkit-box; overflow: hidden;">
                            名字（{{ index + 1 }}）名字超长呀呀
                        </div>
                        <span v-if="index%2 == 1" style=" padding: 0.1rem 0.3rem;border-radius: 0.3rem; font-size:0.625rem;line-height: 0.625rem; color: #4d4f57;background-color: #f3f3f4;"> 99个作品未看 </span>
                    </div>
                 </div>
            </div>
        </div>
        <Slider :items="items" :index="0" style="height:100%;padding-bottom:0.725rem;flex: 1;" />
    </div>
</template>
<style scoped>
    .l-item{display: flex;flex-direction: row; align-items: center; padding:0.2rem .3rem; min-height: 48px; margin:0.3rem 0; border-radius: .4rem;cursor: pointer;transition:all 0.2s;}
    .l-item:hover{ background-color: #eeeeef;}
</style>
